'use client'
import { Canvas } from "@react-three/fiber";
import styles from './lecture.module.css'
import PlayAnimation from "../../components/PlayAnimation";
import { OrbitControls } from "@react-three/drei";
import { useState } from "react";
import { position } from "../choose_chapter/components/Player";
import { Show } from "../../components/Show";
import { useRouter } from "next/navigation";

export default function Page(){
    const [state,setState] = useState("assemble")
    const [part, setPart] = useState("")
    const router = useRouter()

    return(
        <>
        <button onClick={()=>router.back()}>Вернуться к теме</button>
        <h1>Лекция. Основные агрегаты летательных аппаратов</h1>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <div>
            <button onClick={()=>setState("disassemble")}>Разобрать самолет</button>
            <button onClick={()=>setState("assemble")}>Собрать самолет</button>
        </div>
        <div className={styles.canvas}>
            <Canvas camera={{position:[10,10,10]}}>
                <ambientLight intensity={2}/>
                <PlayAnimation src="/assets/su57_anim.glb" state={state}/>
                <OrbitControls enablePan={false} />
            </Canvas>
        </div>

        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <div>
            <button onClick={()=>setPart("fuselage")}>Подсветка фюзеляжа</button>
            <button onClick={()=>setPart("left_wing")}>Подсветка левого крыла</button>
            <button onClick={()=>setPart("right_wing")}>Подсветка правого крыла</button>
            <button onClick={()=>setPart("cabin")}>Подсветка кабины</button>
        </div>
        <div className={styles.canvas}>
            <Canvas camera={{position:[10,10,10]}}>
                <ambientLight intensity={2}/>
                <Show src="/assets/su57_anim.glb" partsNames={[part]} />
                <OrbitControls enablePan={false} />
            </Canvas>
        </div>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <p>Очень интересная лекция... Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam fuga eos soluta, blanditiis cum natus iure, ducimus corrupti tenetur, esse doloribus? Magni exercitationem fugit voluptas odio commodi doloremque natus accusantium.</p>
        <button onClick={()=>router.back()}>Завершить лекцию</button>
        </>
    )
}